
#{extends 'template.html'/}

  <body>

	  
	  
	  
	  <div class="container topExpNav">
	  
	  	<div class="row contTopExpNav">
				  
				  
				  <div class="col-md-12">
				  	
				  		<a href="@{Application.index()}">
					  		<img class="marginLogo" src="@{'/public/images/logoExp.jpg'}" />
				  		</a>
				  		
					  <a href="#" data-toggle="modal" data-target="#myModal" class="btn btn-default btnInscrevaSeExp">Inscreva-se</a>
				  
				  </div>
				  
		</div>
	  
		  
	  </div><!-- container -->
	  
	  
	  
	  
	  <div style="height: 456px; background-image: url('${experiencia.exp_caminho_ima}'); background-repeat: no-repeat; background-position: center top;" class="container topoExp">
		  
		  
		  <div class="row tituloExp">
		  	
		  	<div class="col-md-12 col-centered txt-centered txt-centeredMargin ">
			  	
			  	<h3 class="txtCidadeExp"><b>${experiencia.exp_cidade}</b>, ${experiencia.exp_pais}</h3>
			  	<h1 class="txtTituloExp">${experiencia.exp_titulo}</h1>
			  	
		  	</div>
		  	
		  	
		  	<div class="avatarAutor">
			  
			  <img src="${experiencia.exp_caminho_ima_speakr}" class="img-circle" />
			  
			 </div>

		  				  
		  </div>
		  
		  
	  </div>
	  
	  
	  
	  
	  
	  <div class="container txtAutor">
		  
		  <div class="row">
			  
			  <p class="comAutor">com</p>
			  <h4 class="comAutorNome">${experiencia.exp_speakr}</h4>
			  <p class="resumoExp">
				  
				  “${experiencia.exp_resumo}”
				  
			  </p>
			  
		  </div>
		  
	  </div><!-- /container -->
	  
	  
	  
	  <div class="container descricao">
		  
		  <div class="row col-centered">
			  
			  
			  <div class="col-md-8">
				
				  <h2 class="tiDescricao"><b>${experiencia.exp_cidade}</b>, ${experiencia.exp_pais}</h2>
				  
				  <div class="txtDescricao">
				  <p>${experiencia.exp_descricao}</p>

				  </div>
				  
					  
			  </div>
			  
			  
			  
			  
			  
			  <div class="col-md-4">
				
				
				<div class="thumbnail boxValor">
				
				      
				      <div class="caption">
				      
				      
				        <div class="subBoxValor">				        

				        	<b class="sMoeda">R$</b>
					        <h5 class="pValor">${experiencia.exp_preco}</h5>
					        
					        <p class="pPessoas">
						        Por pessoa<br>
						         <b>3 horas</b>
					        </p>

				        
				        </div>
				        
				         <form  role="form" action="@{Experiencias.cadastrarReserva()}">
				        <input name="experiencia.exp_codigo" type="hidden" value="${experiencia.exp_codigo}" />
				        <div class="formEscolha">
					        
					     	 
							  <div class="form-group"  style="float:left; margin-right:10px;">
							  
							    <label class="labelReserva">Data</label>
							    <input type="date" class="form-control estilo1" placeholder="dd/mm/aaaa">
							  
							  </div>
							  
							  <div class="form-group">
							   
							    <label class="labelReserva">hora</label>
							    
							    <select class="form-control estilo1">
							    	<option>6:00 AM</option>
							    	<option>7:00 AM</option>
							    	<option>8:00 AM</option>
							    	<option>9:00 AM</option>
							    	<option>10:00 AM</option>
							    	<option>11:00 AM</option>
							    	<option>12:00 PM</option>
							    	<option>13:00 PM</option>
							    	<option>14:00 PM</option>
							    	<option>15:00 PM</option>
							    	<option>16:00 PM</option>
							    	<option>17:00 PM</option>
							    	<option>18:00 PM</option>
							    	<option>19:00 PM</option>
							    	<option>20:00 PM</option>
							    	<option>21:00 PM</option>
							    	<option>22:00 PM</option>
							    	<option>23:00 PM</option>
								</select>
														  
							  </div>
							  
							  
							  <div class="form-group">
							   
							   <label class="labelReserva">quantidade de pessoas</label>
							   
							    <select class="form-control estilo2">
								  <option>Duas Pessoas</option>
								  <option>Três Pessoas</option>
								  <option>Quatro Pessoas</option>
								  <option>Cinco Pessoas</option>
								  <option>Seis Pessoas</option>
								</select>	
														  
							  </div>
							   
		
							  <div class="form-group" style="margin-top:35px;">
							  	<button type="submit" class="btn btn-default btnReserve">Reserve agora</button>
							  	  <!-- <button type="submit" data-toggle="modal" data-target="#myModal" class="btn btn-default btnReserve">Reserve agora</button>MENSAGEM -->
							  </div>
							  
					           </form>
					        
				        </div>
				        
				        
				        
				      
				      </div>
				 
				 </div>
				 
				 
				 
				 
				

				
				
					  
			  </div><!-- / col-md-4 -->
			  
			  
			  
		  </div>
		  
	  </div><!-- container -->



	  
	   
	 <div class="container midia">
		
		  
		  <div class="row col-centered">
			  
			  <div class="col-md-8">
				  
				<iframe title="YouTube video player" class="youtube-player" type="text/html" 
width="100%" height="340" src="${experiencia.exp_link_video}"
frameborder="0" allowFullScreen></iframe>  				  
			  </div>
			  
			  <div class="col-md-2">
			  
			  	<img src="imgs/fotoExp.jpg" alt="..." height="150" width="150">
			  	
			  </div>
			  
			  
			  <div class="col-md-2" style="margin-bottom:40px;">
			  	<img src="imgs/fotoExp.jpg" alt="..." height="150" width="150">
			  </div>
			 
			 
			  <div class="col-md-2">
			  	<img src="imgs/fotoExp.jpg" alt="..." height="150" width="150">
			  </div>
			  
			  <div class="col-md-2">
			  	<img src="imgs/fotoExp.jpg" alt="..." height="150" width="150">
			  </div>
			  
			  
			  
		  </div>
		  
	  </div><!-- container --> 
	  
	  
	 
	  
	  <div class="container sobreAutor">
		  
		  
		  <div class="row col-centered">
			  
			  
			  <div class="col-md-12" style="text-align:center;">
				  
				  <div class="avatarAutorSobre">
			  
				  	 <img src="${experiencia.exp_caminho_ima_speakr}" class="img-circle" />
				  
				  </div>
				  
			  </div>
			  
			  
		  </div>
		  
		  <div class="row col-centered">
			  
			  <div class="col-md-12" style="text-align:center;">
				  
				  
				  
				<p class="avatarcomAutor">sobre seu speakr</p>
				  <h4 class="avatarcomAutorNome">${experiencia.exp_speakr}</h4>
				  <p class="avatarresumoExp">
					  
					  “Bring your chopsticks and your appetite for a walking tour of<br>
					  Downtown Flushing with the “guy who ate Queens. Experience<br>
					  the sights, sounds, and flavors of Chinatown.”
					  
				  </p>

				  
			  </div>
			  
		  </div>
		  
		  
	  </div><!-- container -->
	  
	  
	  
	  
	  <!-- MENSAGEM -->
	  <div class="container mensagem">
		  
		  <div class="row">
			  
			  
			  <div class="col-md-12 legendaTxt">
				  
				  
				  <h1 class="tituloContHome">Experiência Personalizada</h1>
				  <h2 class="subTituloContHome">Solicite uma experiência personalizada, conte-nos suas necessidades<br> e encaminharemos uma nova proposta.</h2>

				  
				  
			  </div><!-- /col-md-12 -->
			  
			  
		  </div><!-- / row -->
		  
		  
		  <div class="row mTop">
			  
			  <div class="col-md-3"></div>
			  
			  <div class="col-md-6">
				  
				  
				<form class="form-horizontal" role="form" action="@{Application.contatoMail(email)}">
				 	
						  <div class="form-group">
					
						    <input name="email.ema_nome" type="text" class="form-control msgInput" id="exampleInput" placeholder="Seu nome">
						    <input name="email.ema_email" type="email" class="form-control msgInput" id="exampleInputEmail1" placeholder="Seu email">
						    <textarea name="email.ema_texto" class="form-control msgInputTA" rows="5" placeholder="Mensagem"></textarea> 

						    
						    <button type="submit" class="btn btn-default btnEnviarMsg">Enviar</button>
					
						  </div>
					  
					  </form>
				  
				  
			  </div>
			  
			  <div class="col-md-3"></div>
			  
			  
		  </div>
		  
	  </div><!-- FIM MENSAGEM -->

	  
	  
	 <div class="container rodape">
		  
		<div class="row col-centered">
			
			<div class="col-md-4">
				
				<p class="copy">Copyright © Speakrs 2014</p>
			
			</div>
			
			<div class="col-md-3 col-md-offset-5 icoRedes">
				
				<a href="#" target="_blank">
					<img src="@{'/public/images/ico_facebook.jpg'}" />
				</a>
				
				<a href="#" target="_blank">
					<img src="@{'/public/images/ico_twitter.jpg'}" />
				</a>
				
			</div>
			
		</div>
				  
	  </div><!-- /container -->






<!-- MODAL -->
	
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Reserve agora</h4>
      </div>
      <div class="modal-body">
        <form  role="form" action="@{Experiencias.cadastrarReserva()}">
					
						  <div class="form-group">
							<input type="text" name="nome" class="form-control msgInput" id="exampleInput" placeholder="Nome"><br>
						    <input type="email" name="email" class="form-control msgInput" id="exampleInputEmail1" placeholder="Email">
						    <button type="submit" data-toggle="modal" data-target="#myModal" class="btn btn-default btnInscrevaEmail">Reserve</button>
					
						  </div>
					  
					  </form>
      </div>
      
    </div>
  </div>
</div>
<!-- FIM MODAL -->



    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="@{'/public/javascripts/jquery-1.10.2.js'}"></script>
<script src="@{'/public/javascripts/bootstrap.js'}"></script>
  </body>

